<template>
    <div>
        <div>
            <head-bar height="80" :middleText="orgName"  :leftClick="returnPage" :rightClick="autoJumpClicked" :rightIcons="[tabIndex === 0 && 'add',tabIndex == 3 && 'search']"></head-bar>
        </div>
        <wxc-tab-page ref="wxc-tab-page"
                      :tab-titles="tabTitles"
                      :tab-styles="tabStyles"
                      title-type="icon"
                      pan-dist="20"
                      duration="150"
                      :tab-page-height="tabPageHeight"
                      @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
            <list v-for="(v,index) in tabList"
                  :key="index"
                  class="item-container"
                  :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">


                <refresh v-if="index == 0" class="refresh" @refresh="loadFollowData('refresh')"
                         :display="followRefreshing ? 'show' : 'hide'">
                    <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                       class="indicator"></loading-indicator>
                </refresh>

                <refresh v-if="index == 3" class="refresh" @refresh="loadOrder('refresh',{page:1})"
                         :display="orderRefreshing ? 'show' : 'hide'">
                    <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                       class="indicator"></loading-indicator>
                </refresh>

                <cell class="border-cell"></cell>
                <cell v-if="index == 0" v-for="(item,key) in v"
                      class="cell"
                      :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan" @wxcPanItemClicked="wxcPanItemClicked(item)">
                        <div class="follow-area">
                            <div class="user-info-area">
                                <image class="user-photo" src="root:img/my_photo.png"></image>
                                <div class="user-name-time">
                                    <text class="user-name text-notmal">{{item.followUserName}}</text>
                                    <text class="text-minor follow-time">{{formatTime(item.followTime)}}</text>
                                </div>
                            </div>
                            <div class="follow-content-area">
                                <div class="follow-content">
                                    <text class="text-success">【{{getFollowTypeName(item.followType)}}】</text>
                                    <text class="text-notmal">{{item.followContent}}</text>
                                </div>

                                <div v-if="item.contentType == 1100" class="img-row" v-for="(fimg,findex) in imgTypesettingList(item.contentFiles)">
                                    <image class="img-ele"
                                           v-for="(ele,eleIndex) in fimg"
                                           :src="ele.thumb"
                                           @click="openWxcLightboxOverlayClicked(findex*3+eleIndex,item.contentFiles)"
                                           placeholder="root:img/default_yx.png"></image>
                                </div>
                            </div>
                        </div>
                        <div class="follow-footer"></div>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 1" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan">
                        <user-doc :user-id="userId" :user-type="userType" :is-show="_isInfoShowBtn"></user-doc>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 2" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan">
                        <contacts-list :user-id="userId" :user-type="userType" :is-show="_iscontactShowBtn"></contacts-list>
                    </wxc-pan-item>
                </cell>
                <cell v-if="index == 3" v-for="(item,key) in v" class="cell" :key="key">
                    <wxc-pan-item @wxcPanItemPan="wxcPanItemPan" @wxcPanItemClicked="popupOppenOrderClick(item.orderId)">
                        <div class="order-panel">
                          <div class="order-header">
                              <text class="text-gray order-no">{{item.orderNo}}</text>
                              <text class="text-gray order-stat">{{item.orderStatusName}}</text>
                          </div>

                          <div class="order-content">
                              <div class="order-cell">
                                  <text class="text-gray order-label">{{userType == 'buyer' ? '供应商：':'采购商：'}}</text>
                                  <text class="text-gray order-input">{{userType == 'buyer' ? item.supplierName:item.buyerName}}</text>
                              </div>
                              <div class="order-cell">
                                  <text class="text-gray order-label">下单员：</text>
                                  <text class="text-gray order-input">{{item.orderUserName}}</text>
                              </div>
                              <div class="order-cell">
                                  <text class="text-gray order-label">订单金额：</text>
                                  <text class="text-gray order-input order-price">￥{{item.orderAmount}}</text>
                              </div>
                              <div class="order-cell">
                                  <text class="text-gray order-label">下单时间：</text>
                                  <text class="text-gray order-input">{{item.orderTime}}</text>
                              </div>
                              <div class="order-cell">
                                  <text class="text-gray order-label">订单类型：</text>
                                  <text class="text-gray order-input"></text>
                              </div>
                          </div>
                        </div>
                        <div class="follow-footer"></div>
                    </wxc-pan-item>
                </cell>

                <loading v-if="index == 0" class="loading" @loading="loadFollowData('loadding',followPage+1)" :display="followItemLoadding ? 'show' : 'hide'">
                    <loading-indicator class="loading-indicator"></loading-indicator>
                </loading>

                <loading v-if="index == 3" class="loading" @loading="loadOrder('loadding',{page:orderPage+1})" :display="orderLoadinging ? 'show' : 'hide'">
                    <loading-indicator class="loading-indicator"></loading-indicator>
                </loading>

            </list>
        </wxc-tab-page>
        <wxc-popup popup-color="#f2f3f4"
                   :show="isOrderPropShow"
                   @wxcPopupOverlayClicked="popupOverlayBottomClick"
                   pos="right">
            <div class="detail-container">
                <head-bar height="80" middleText="订单详情" :leftClick="popupOverlayOrderClick"></head-bar>
                <scroller :style="{height:orderScrollerHeight}">
                    <div class="o-cell  cell-bottom-border">
                        <text class="text-notmal o-title o-bold">订单状态</text>
                        <text class="text-notmal o-cell-stat">{{orderDetailData.orderStatusName}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">订单号：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.orderNo}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">下单人员：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.orderUserName}}</text>
                    </div>
                    <div class="o-cell o-cell-h cell-bottom-border">
                        <text class="text-notmal o-cell-title">下单时间：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.orderTime}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">{{userType =='buyer'? '供应商：':'采购商：'}}</text>
                        <text class="text-notmal o-cell-input">{{userType =='buyer'? orderDetailData.supplierName:orderDetailData.buyerName}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">联系人：</text>
                        <text class="text-notmal o-cell-input">{{userType =='buyer'? orderDetailData.linkman:orderDetailData.buyerLinkman}}</text>
                    </div>
                    <div class="o-cell o-cell-h cell-bottom-border">
                        <text class="text-notmal o-cell-title">手机号码：</text>
                        <text class="text-notmal o-cell-input">{{userType =='buyer'? orderDetailData.linkmanMobile:orderDetailData.buyerLinkmanMobile}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">配送企业：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.expressSupplierName}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-cell-title">联系人：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.expressSupplierLinkman}}</text>
                    </div>
                    <div class="o-cell o-cell-h cell-bottom-border">
                        <text class="text-notmal o-cell-title">联系电话：</text>
                        <text class="text-notmal o-cell-input">{{orderDetailData.expressSupplierLinkMobile}}</text>
                    </div>

                    <div class="o-cell  cell-bottom-border" @click="popupOpenGoodsDetailClick(orderDetailData.orderId)">
                        <text class="text-notmal o-title o-bold">商品清单</text>
                        <text class="text-notmal o-cell-stat">共{{orderDetailData.goodsClassifysNum}}种，总数{{orderDetailData.goodsNum}}</text>
                    </div>


                    <div class="o-cell o-cell-h">
                        <text class="o-text-min o-cell-title">订单金额：</text>
                        <text class="o-text-min o-cell-stat o-red">￥{{orderDetailData.orderAmount}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="o-text-min o-cell-title">商品金额：</text>
                        <text class="o-text-min o-cell-stat o-red">￥{{orderDetailData.orderGoodsAmount}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="o-text-min o-cell-title">运费金额：</text>
                        <text class="o-text-min o-cell-stat o-red">￥{{orderDetailData.orderLogisticsAmount}}</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="o-text-min o-cell-title">优惠金额：</text>
                        <text class="o-text-min o-cell-stat o-red">￥{{orderDetailData.orderYouhui}}</text>
                    </div>

                    <div class="o-line"></div>


                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-title o-bold">采购备注</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal" style="width: 720px;text-align: left;">{{orderDetailData.userSuperMessage}}</text>
                    </div>
                    <div class="o-line"></div>

                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-title o-bold">供应备注</text>
                    </div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal" style="width: 720px;text-align: left;">{{orderDetailData.userSupperMessage}}</text>
                    </div>

                    <div class="o-line"></div>
                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-title o-bold">收货信息</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-title">收货人：</text>
                        <text class="o-text-min o-cell-stat o-red">{{orderDetailData.delivePerson}}</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-title">收货地址：</text>
                        <text class="o-text-min o-cell-stat ">{{orderDetailData.deliveAddress}}</text>
                    </div>

                    <div class="o-line"></div>

                    <div class="o-cell o-cell-h">
                        <text class="text-notmal o-title o-bold">发票信息</text>
                    </div>

                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-big-title">发票抬头：</text>
                        <text class="o-text-min o-cell-big-input ">{{orderDetailData.billTitle}}</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-big-title">发票类型：</text>
                        <text class="o-text-min o-cell-big-input ">{{orderDetailData.billType}}</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-big-title">纳税人识别码：</text>
                        <text class="o-text-min o-cell-big-input ">{{!orderDetailData.taxpayerNo ? '':orderDetailData.taxpayerNo.length > 20 ? orderDetailData.taxpayerNo.substring(0,17)+'...':orderDetailData.taxpayerNo}}</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-big-title">开户行及账号：</text>
                        <text class="o-text-min o-cell-big-input ">{{!orderDetailData.taxpayerBankNo ? '':orderDetailData.taxpayerBankNo.length > 20 ? orderDetailData.taxpayerBankNo.substring(0,17)+'...':orderDetailData.taxpayerBankNo}}</text>
                    </div>
                    <div class="o-cell o-cell-h-min">
                        <text class="o-text-min o-cell-big-title">地址及电话：</text>
                        <text class="o-text-min o-cell-big-input ">{{!orderDetailData.taxpayerSite ? '':orderDetailData.taxpayerSite.length > 20 ? orderDetailData.taxpayerSite.substring(0,17)+'...':orderDetailData.taxpayerSite}}</text>
                    </div>

                </scroller>

            </div>
        </wxc-popup>
        <wxc-popup popup-color="#f2f3f4"
                   :show="isGoodsDetailShow"
                   @wxcPopupOverlayClicked="popupOverGoodsDetailClick"
                   pos="right">
            <div class="detail-container">
                <head-bar height="80" middleText="商品详情" :leftClick="popupOverGoodsDetailClick"></head-bar>
                <div class="o-cell  goods-bg" >
                    <text class="text-notmal o-title o-bold">共{{goodsTotalNum}}种商品</text>
                    <text class="text-notmal o-cell-stat o-red">￥{{goodsTotalAmount}}</text>
                </div>
                <div class="o-line"></div>
                <list>
                    <refresh class="refresh" @refresh="loadGoodsItem('refresh',{page:1})"
                             :display="goodsItemRefreshing ? 'show' : 'hide'">
                        <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                           class="indicator"></loading-indicator>
                    </refresh>
                    <cell v-for="item in orderGoodsData">
                        <div class="o-cell goods-bg">
                            <text class="text-notmal o-title">{{item.goodsName}}</text>
                        </div>
                        <div class="o-cell o-cell-h-min goods-bg">
                            <text class="o-text-min o-cell-big-title">规格：</text>
                            <text class="o-text-min o-cell-big-input">{{item.goodsSpec}}</text>
                        </div>
                        <div class="o-cell o-cell-h-min goods-bg">
                            <text class="o-text-min o-cell-big-title">厂家：</text>
                            <text class="o-text-min o-cell-big-input ">{{item.factory}}</text>
                        </div>
                        <div class="o-cell o-cell-h-min goods-bg">
                            <text class="o-text-min o-cell-big-title">数量/已发：</text>
                            <text class="o-text-min o-cell-big-input ">{{item.num}}/{{item.sendNum+item.unit}}</text>
                        </div>
                    </cell>


                    <loading class="loading" @loading="loadGoodsItem('loadding',{page:goodsItemParams.page+1})" :display="orderLoadinging ? 'show' : 'hide'">
                        <loading-indicator class="loading-indicator"></loading-indicator>
                    </loading>
                </list>
            </div>
        </wxc-popup>
    </div>
</template>

<!--商品详情-->
<style>

    .img-ele{
        width: 200px;
        height: 200px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .img-row{
        flex-direction: row;
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .img-panel{
        flex-direction: column;
    }

 .goods-bg{
     background-color: white;
 }


    /*订单详情*/

 .detail-container{
         flex-direction: column;
     }

 .o-cell{
     flex-direction: row;
     padding-left: 15px;
     padding-right: 15px;
     height: 80px;
     align-items: center;
 }


 .o-cell-h{
     height: 70px;
 }

 .o-cell-h-min{
     height: 40px;
 }

 .o-fsize-25{
     font-size:25px;
 }

 .o-text-min{
     font-size:25px;
     color: #6c6c6c;
 }

 .o-title{
     text-align: left;
     width:150px;
 }

 .o-bold{
     color: #555555;
     font-weight: 800;
 }

 .o-red{
     color: #ff565e;
 }

 .o-line{
     width:750px;
     background-color: #e2e2e2;
     height:10px;
 }

 .o-cell-input{
     text-align: left;
     width:570px;
 }

 .cell-top-border {
     border-top-color: #e2e2e2;
     border-top-width: 2px;
 }

 .cell-bottom-border {
     border-bottom-color: #e2e2e2;
     border-bottom-width: 2px;
 }

 .o-cell-stat{
     text-align: right;
     width:570px;
 }

 .o-cell-title{
     text-align: right;
     width:150px;
 }

 .o-cell-big-title{
     text-align: right;
     width:200px;
 }

 .o-cell-big-input{
     text-align: right;
     width:520px;
 }

 /*下拉更新与加载更多*/
 .refresh {
     align-items: center;
     justify-content: center;
 }

 .indicator-text {
     color: #888888;
     font-size: 42px;
     text-align: center;
 }

 .loading {
     width: 750px;
     display: -ms-flex;
     display: -webkit-flex;
     display: flex;
     -ms-flex-align: center;
     -webkit-align-items: center;
     -webkit-box-align: center;
     align-items: center;
 }

 .loading-indicator-text {
     color: #888888;
     font-size: 42px;
     text-align: center;
 }

 .loading-indicator {
     margin-top: 16px;
     height: 40px;
     width: 40px;
     color: blue;
 }

    /*订单列表*/
 .order-panel{
     flex-direction: column;
     width:750px;
 }

 .order-header{
     flex-direction: row;
     padding-top: 20px;
     height:70px;
     border-bottom-width: 1px;
     border-bottom-color: #dddddd;
     padding-right:20px;
     padding-left:20px;
 }

 .order-content{
     flex-direction: column;
     padding-top:15px;
     padding-bottom: 15px;
 }

 .order-no{
     text-align: left;
     width:410px;
     color: #01A65A;
 }
 .order-stat{
     text-align: right;
     width:300px;
 }

 .order-cell{
     flex-direction:row;
     height: 60px;
     justify-content:center;
     align-items: center;
 }

 .order-label{
     text-align: right;
     font-size: 28px;
     width:150px;
 }

 .order-input{
     text-align: left;
     font-size: 28px;
     width: 600px;
 }

 .order-price{
     color: red;
 }

    /*其他*/
 .item-container {
     width: 750px;
     background-color: #f2f3f4;
 }

 .border-cell {
     background-color: #f2f3f4;
     width: 750px;
     height: 24px;
     align-items: center;
     justify-content: center;
     border-bottom-width: 0px;
     border-style: solid;
     border-color: #e0e0e0;
 }

 .cell {
     background-color: #ffffff;
 }

 .follow-footer {
     background-color: #f5f5f5;
     width: 750px;
     height: 10px;
 }

 .content {
     width: 750px;
     height: 300px;
     border-bottom-width: 1px;
     align-items: center;
     justify-content: center;
 }

 .follow-area {
     flex-direction: column;
     padding-left: 15px;
     padding-right: 15px;
     margin-bottom: 30px;
 }

 .user-info-area {
     margin-top: 32px;
     flex-direction: row;
 }

 .user-photo {
     width: 80px;
     height: 80px;
     border-radius: 50px;
     margin-right: 20px;
     border-width: 1px;
     border-color: #dddddd;
 }

 .user-name-time {
     flex-direction: column;
 }

 .user-name {
     margin-bottom: 5px;
 }

 .follow-time {
     font-size: 25px;
 }

 .follow-content-area {
     margin-top: 32px;
     flex-direction: column;
 }

 .follow-status {
     flex-direction: row;
     padding-left: 15px;
 }

 .follow-content {
     flex-direction: row;
     margin-top: 24px;
 }

 .follow-content-img {
     margin-top: 24px;
 }

 .follow-img {
     width: 200px;
     height: 200px;
 }

    /*全局通用*/

 .text-minor {
     font-size: 30px;
     color: #c4c4c4;
 }

 .text-gray {
     font-size: 30px;
     color: #878787;
 }

 .text-notmal {
     font-size: 30px;
     color: #272727;
 }

 .text-important {
     font-size: 30px;
     color: #000000;
     font-weight: 800;
 }

 .text-success {
     font-size: 30px;
     color: #01a65a;
 }
</style>


<script>
    import {WxcTabPage, WxcPanItem, Utils, BindEnv, WxcLightbox,WxcPopup} from 'weex-ui'
    import headBar from '../components/headBar.vue'
    import userDoc from '../user/userDoc.vue'
    import contactsList from '../user/contactsList.vue'
    import nw from '../network/nw.js'
    import Config from './customerDetailconfig'
    import dtl from '../utils/dateUtils.js'
    import ynav from '../network/nav.js'

    const followTypeMap = {
        1000: '客户',
        1100: '普天宝',
        1200: '商品',
        1300: '订单',
        1400: '财务',
        1500: '投诉',
        1600: '其他',
        1700: '确认需求',
        1800: '跟踪维护',
    }

    export default {
        components: {WxcTabPage, WxcPanItem, headBar, WxcLightbox, userDoc, contactsList,WxcPopup},
        data: () => ({
            userId:0,
            userType:'',
            orgName:'',
            tabTitles: Config.tabTitles,
            tabStyles: Config.tabStyles,
            tabList: [],
            demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            tabPageHeight: 1334,
            slideImage: [],
            slideShow: false,
            slideIndex: 0,
            tabIndex: 0,
            orderAreaInit:false,//订单区域是否初始化
            orderRefreshing:false,
            orderLoadinging:false,
            orderParams:{},//订单加载参数
            orderPage:1,
            isOrderPropShow:false,
            orderDetailData:{},
            orderScrollerHeight:1344,
            isGoodsDetailShow:false,
            orderGoodsData:[],
            goodsItemParams:{},//商品item参数
            goodsItemRefreshing:false,
            goodsItemLoadding:false,
            goodsTotalNum:0,//订单商品总数
            goodsTotalAmount:0,//订单商品总金额

            followRefreshing:false,
            followItemLoadding:false,
            followPage:1,
            param:{}
        }),
        computed: {
            _isInfoShowBtn: function () {
                if (this.tabIndex == 1) {
                    return true
                } else {
                    return false
                }
            },
            _iscontactShowBtn: function () {
                if (this.tabIndex == 2) {
                    return true
                } else {
                    return false
                }
            }

        },
        created() {

        },
        methods: {

            imgTypesettingList(url){

                if (!url || url === '') {
                    return [];
                }

                var list = url.split(';')

                var arr = []
                var tempArr = []
                var nindex = 0
                // list = [1,2,3,4,5,6,7]
                for (let i = 0; i < list.length; i++) {
                    var url = {
                        url:list[i].split(',')[1],
                        thumb:list[i].split(',')[2],
                    }

                    if (i / 3 == nindex) {
                        tempArr = []
                        arr.push(tempArr)
                        nindex++
                    }
                    tempArr.push(url)

                }
                return arr
            },

            //重新加载订单列表
            reloadOrderList(){
                var modal = weex.requireModule('modal')
                modal.toast({message:param})
            },

            autoJumpClicked(){
               if(this.tabIndex == 0 ) {
                   ynav.pushParam('root:com/yx/follow/followAdd.js',{orgName:this.param.orgName,userId:this.param.userId,userType:this.param.userType} )
               }

               if(this.tabIndex == 3) {
                   var self = this
                   ynav.pushParam('root:com/yx/order/searchOrder.js',{orgName:this.param.orgName,userId:this.param.userId,userType:this.param.userType},(data)=>{
                       self.loadOrder('refresh',data)
                   })
               }
            },

            wxcTabPageCurrentTabSelected(e) {
                const self = this;
                const index = e.page;
                this.tabIndex = e.page
                /* Unloaded tab analog data request */

                if (e.page == 1 || e.page == 2) {
                    Vue.set(self.tabList, index, [0]);

                }else if(e.page == 3){
                    if(!this.orderAreaInit){
                        this.loadOrder('refresh')
                        this.orderAreaInit = true
                    }
                }


            },

            wxcPanItemPan(e) {
                if (BindEnv.supportsEBForAndroid()) {
                    this.$refs['wxc-tab-page'].bindExp(e.element);
                }
            },

            //返回上个页面
            returnPage() {
                const nav = weex.requireModule('navigator')
                nav.back()
            },

            //开启幻灯片
            openWxcLightboxOverlayClicked(findex,url) {


                var arr = this.imgList(url)
                var modal = weex.requireModule('modal')
                modal.alert({message:JSON.stringify(arr)})
                let imgArr = []
                for(let k in arr){
                    var imgs = arr[k]
                    imgArr.push(imgs.url)
                }
                var zm=weex.requireModule('zoomImage')
                let p={}
                p.index=findex
                p.list=imgArr
                zm.show(p)

            },


            wxcLightboxOverlayClicked() {
                this.slideShow = false
            },

            //加载历史跟进记录
            loadFollowData(type,page) {
                var self = this
                if(type == 'refresh') {
                    self.followRefreshing = true
                    this.followPage = 1
                }

                if(type == 'loadding'){
                    self.followItemLoadding = true
                    this.followPage = page
                }


                nw.postDefine('/app/yxq/follow/list', {
                    data: {userId: this.param.userId, userType: this.param.userType, page: this.followPage},
                    success(res) {

                        if(type == 'refresh') {
                            Vue.set(self.tabList, 0, res)
                            self.followRefreshing = false
                        }

                        if(type == 'loadding'){
                            self.followItemLoadding = false
                            if(res.length == 0) {
                                self.followPage -= 1
                            }
                            for(let i in res){
                                self.tabList[0].push(res[i])
                            }
                        }
                    }
                })
            },

            //加载订单列表数据
            loadOrder(type,option){
                if(type == 'refresh') {
                    this.orderParams = {}
                }

                var userParam = this.userType == 'buyer' ? {userBuyerId:this.userId}:{userSupplierId:this.userId}
                var newOpt = Object.assign(this.orderParams,userParam,{page:1}, option)
                this.orderPage = newOpt.page
                var self = this
                if(type == 'refresh') {
                    self.orderRefreshing = true
                }

                if(type == 'loadding'){
                    self.orderLoadinging = true
                }

                nw.postDefine('/app/order/orderList',{
                    data:newOpt,
                    success(res){
                        if(type == 'refresh'){
                            Vue.set(self.tabList, 3, res.orderList)
                            self.orderRefreshing = false
                        }
                        if(type == 'loadding'){
                            self.orderLoadinging = false
                            if(res.orderList.length == 0) {
                                self.orderPage -= 1
                            }
                            for(let i in res.orderList){
                                self.tabList[3].push(res.orderList[i])
                            }
                        }
                    }
                })
            },

            //关闭商品项列表层
            popupOverGoodsDetailClick(){
                this.isGoodsDetailShow = false
                this.goodsItemParams = {}
                this.orderGoodsData = []
                this.goodsTotalNum =0 //订单商品总数
                this.goodsTotalAmount= 0 //订单商品总金额
            },

            wxcPanItemClicked(params){
                params.orgName = this.orgName
                ynav.pushParam('root:com/yx/follow/followDetail.js',params)
            },

            //打开商品项列表层
            popupOpenGoodsDetailClick(orderId){
                this.loadGoodsItem('refresh',{orderId:orderId})
                this.isGoodsDetailShow = true
            },

            //加载商品详情
            loadGoodsItem(type,option){
                var self = this
                var newOpt = Object.assign(this.goodsItemParams,{page:1}, option)
                this.goodsItemParams.page = newOpt.page

                if(type == 'refresh') {
                    self.goodsItemRefreshing = true
                }

                if(type == 'loadding'){
                    self.goodsItemLoadding = true
                }

                nw.postDefine('/app/order/orderItemList',{
                    data:newOpt,
                    success(res){
                        self.goodsTotalNum =res.orderItemCount //订单商品总数
                        self.goodsTotalAmount= res.orderItemPrice //订单商品总金额

                        if(type == 'refresh') {
                            self.goodsItemRefreshing = false
                            self.orderGoodsData = res.orderItemList
                        }

                        if(type == 'loadding'){
                            self.goodsItemLoadding = false
                            if(res.length == 0) {
                                self.goodsItemParams.page -= 1
                            }
                            for(let i in res.orderItemList){
                                self.orderGoodsData.push(res.orderItemList[i])
                            }
                        }
                    }
                })
            },

            //刷新订单列表数据
            onrefreshOrderArea() {
                this.loadOrder('refresh',{page:1})
            },

            //关闭订单详情弹出框
            popupOverlayOrderClick(){
                this.isOrderPropShow = false
                this.orderDetailData = {}
            },

            //打开订单弹出层
            popupOppenOrderClick(orderId){
                var self = this
                nw.postDefine('/app/order/orderDetail',{
                    data:{orderId:orderId},
                    success(res){
                        self.orderDetailData = res
                        self.isOrderPropShow = true
                    }
                })
            },

            //获取跟进记录类型
            getFollowTypeName(typeCode) {
                if (!typeCode) {
                    return ''
                }

                return followTypeMap[typeCode]

            },

            formatTime: function (time) {

                if (!time) {
                    return ''
                }

                return dtl.formatDay(time)
            },

            //获取跟进记录瀑布流高度
            autoFollowHeightStyle: function (urls) {
                var arr = this.imgList(urls)

                if (arr.length == 0) {
                    return {height: 0}
                } else {

                    var index = parseInt(arr.length / 4)

                    var remain = arr.length % 4

                    if (remain > 0) {
                        index += 1
                    }

                    return {height: index * 220}
                }

            },

            //获取图片集合
            imgList(urls) {
                if (!urls) {
                    return []
                }

                var list = urls.split(';')


                var arr = new Array()
                for (let i = 0; i < list.length; i++) {
                    var url = list[i].split(',')[1]
                    arr.push(url)
                }

                return arr
            },

            onLoad(){
                const nav = weex.requireModule('navigator')
                var param = nav.param()
                this.param = nav.param()
                this.userId = param.userId
                this.userType = param.userType
                this.orgName = param.orgName
                this.tabPageHeight = Utils.env.getPageHeight();
                this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
//            Vue.set(this.tabList, 0, this.demoList);
                this.loadFollowData('refresh')
                this.orderScrollerHeight = Utils.env.getScreenHeight() - 130
            }
        }
    }
</script>